/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-popup {
	height: 0;
	position: fixed;
	z-index: var(--pure-z-index-upper);

	&__container {
		width: var(--pure-popup-width, 80%);
		height: var(--pure-popup-height);
		max-width: var(--pure-popup-max-width, 100%);
		max-height: var(--pure-popup-max-height, 100%);
		display: flex;
		flex-direction: column;
		position: var(--pure-popup-position, relative);
		margin: var(--pure-popup-margin);
		padding: var(--pure-popup-padding);
		align-self: var(--pure-popup-align-self);
		transform: var(--pure-popup-transform);
		z-index: var(--pure-popup-z-index, var(--pure-z-index-upper));
		top: var(--pure-popup-top);
		left: var(--pure-popup-left);
		right: var(--pure-popup-right);
		bottom: var(--pure-popup-bottom);
		transform: var(--pure-popup-transform);
		animation-timing-function: var(--pure-popup-animation-timing-function, ease-in-out);
		animation-duration: var(--pure-popup-animation-duration, 0.3s);
		animation-delay: var(--pure-popup-animation-delay);
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	&__wrapper {
		background: var(--pure-popup-background, var(--pure-background-default));
		border-radius: var(--pure-popup-border-radius, var(--pure-radius-default));
		position: relative;
		box-shadow: var(--pure-popup-shadow, 0 10px 20px rgba(0, 0, 0, 0.2));
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	&__header {
		flex-shrink: 0;
		height: var(--pure-popup-header-height);
		display: flex;
		flex-direction: row;
		align-items: var(--pure-popup-header-align-items, center);
		justify-content: var(--pure-popup-header-justify-content, center);
		position: relative;
		margin: var(--pure-popup-header-margin);
		padding: var(--pure-popup-header-padding, 12px 16px);
		position: relative;
		border-radius: var(
			--pure-popup-header-border-radius,
			var(--pure-popup-border-radius, var(--pure-radius-default))
				var(--pure-popup-border-radius, var(--pure-radius-default)) 0 0
		);
		border-bottom: var(
			--pure-popup-header-border-bottom,
			var(--pure-popup-header-border-bottom-width, 0) var(--pure-popup-header-border-bottom-style, solid)
				var(--pure-popup-header-border-bottom-color, var(--pure-border-color-default))
		);

		&__button {
			width: var(--pure-popup-header-button-width, 4em);
			font-size: var(--pure-popup-header-button-font-size);
			font-weight: var(--pure-popup-header-button-font-weight, 500);
			color: var(--pure-popup-header-button-color);
			flex-shrink: 0;

			&--left {
				font-size: var(--pure-popup-header-button-left-font-size, var(--pure-popup-header-button-font-size));
				font-weight: var(
					--pure-popup-header-button-left-font-weight,
					var(--pure-popup-header-button-font-weight, 500)
				);
				color: var(--pure-popup-header-button-left-color, var(--pure-popup-header-button-color));
				text-align: var(--pure-popup-header-button-left-text-align, left);
			}

			&--right {
				font-size: var(--pure-popup-header-button-right-font-size, var(--pure-popup-header-button-font-size));
				font-weight: var(
					--pure-popup-header-button-right-font-weight,
					var(--pure-popup-header-button-font-weight, 500)
				);

				color: var(--pure-popup-header-button-right-color, var(--pure-popup-header-button-color));
				text-align: var(--pure-popup-header-button-right-text-align, right);
			}
		}
	}

	&__title {
		font-size: var(--pure-popup-title-font-size, var(--pure-font-size-large));
		font-weight: var(--pure-popup-title-font-weight, 600);
		color: var(--pure-popup-title-color);
		text-align: var(--pure-popup-title-text-align, center);
		line-height: var(--pure-popup-title-line-height);
		flex: 1;
	}

	&__close {
		position: var(--pure-popup-close-position);
		color: var(--pure-popup-close-color);
		top: var(--pure-popup-close-top);
		bottom: var(--pure-popup-close-bottom);
		left: var(--pure-popup-close-left);
		right: var(--pure-popup-close-right);
		font-size: var(--pure-popup-close-font-size);
		z-index: var(--pure-popup-close-z-index, 2);
		border: var(--pure-popup-close-border-width, 0) var(--pure-popup-close-border-style, solid)
			var(--pure-popup-close-border-color, currentColor);
		border-radius: var(--pure-popup-close-border-radius);
		width: var(--pure-popup-close-width);
		height: var(--pure-popup-close-height);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		transform: var(--pure-popup-close-transform);
		font-weight: var(--pure-popup-close-font-weight, 600);
		line-height: 1;
		margin: var(--pure-popup-close-margin);
		padding: var(--pure-popup-close-padding);
		flex-shrink: 0;
	}

	&--close {
		&--bottom {
			.pure-popup__close {
				width: var(--pure-popup-close-width, 2em);
				height: var(--pure-popup-close-height, 2em);
				margin: var(--pure-popup-close-margin, 16px auto);
				border: var(--pure-popup-close-border-width, 1px) var(--pure-popup-close-border-style, solid)
					var(--pure-popup-close-border-color, currentColor);
				color: var(--pure-popup-close-color, var(--pure-text-color-invert));
				border-radius: var(--pure-popup-close-border-radius, var(--pure-radius-circle));
				font-size: var(--pure-popup-close-font-size, var(--pure-font-size-small));
			}
		}

		&--right {
			.pure-popup__close {
				position: var(--pure-popup-close-position, absolute);
				top: var(--pure-popup-close-top, 10px);
				right: var(--pure-popup-close-right, 8px);
				font-size: var(--pure-popup-close-font-size, var(--pure-font-size-large));
			}
		}

		&--left {
			.pure-popup__close {
				position: var(--pure-popup-close-position, absolute);
				top: var(--pure-popup-close-top, 10px);
				left: var(--pure-popup-close-left, 8px);
				font-size: var(--pure-popup-close-font-size, var(--pure-font-size-large));
			}
		}
	}

	&__line {
		&--button {
			width: var(--pure-popup-button-line-size, var(--pure-popup-line-size, 1px));
			height: var(--pure-popup-button-line-height, 100%);
			background: var(
				--pure-popup-button-line-color,
				var(--pure-popup-line-color, var(--pure-border-color-default))
			);
			flex-shrink: 0;
		}
	}

	&__top {
		flex-shrink: 0;
	}

	&__body {
		flex: 1;
		overflow: hidden;
		padding: var(--pure-popup-body-padding);
		margin: var(--pure-popup-body-margin);
	}

	&__bottom {
		flex-shrink: 0;
	}

	&__scroll-view {
		width: 100%;
		height: 100%;
	}

	&__content {
		text-align: var(--pure-popup-content-text-align, justify);
		padding: var(--pure-popup-content-padding, 0 20px);
		background: var(--pure-popup-content-background);
		height: 100%;
	}

	&__footer {
		flex-shrink: 0;
		height: var(--pure-popup-footer-height);
		display: flex;
		flex-direction: row;
		align-items: var(--pure-popup-footer-align-items, center);
		justify-content: var(--pure-popup-footer-justify-content, center);
		text-align: var(--pure-popup-footer-text-align, center);
		background: var(--pure-popup-footer-background);
		font-size: var(--pure-popup-footer-font-size);
		color: var(--pure-popup-footer-color);
		margin: var(--pure-popup-footer-margin);
		padding: var(--pure-popup-footer-padding, 10px 20px);
		gap: var(--pure-popup-footer-gap, 10px);
		background: var(--pure-popup-footer-background);
		overflow: hidden;
		border-radius: var(
			--pure-popup-footer-border-radius,
			0 0 var(--pure-popup-border-radius, var(--pure-radius-default))
				var(--pure-popup-border-radius, var(--pure-radius-default))
		);
		font-size: var(--pure-popup-footer-font-size);
		font-weight: var(--pure-popup-footer-font-weight);
		border-top: var(
			--pure-popup-footer-border-top,
			var(--pure-popup-footer-border-top-width, 0) var(--pure-popup-footer-border-top-style, solid)
				var(--pure-popup-footer-border-top-color, var(--pure-border-color-default))
		);

		&__button {
			flex: var(--pure-popup-footer-button-flex, 1);
			height: var(--pure-popup-footer-button-height, 3em);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			--pure-button-height: 100%;
			--pure-button-width: 100%;

			&--cancel {
				--pure-button-color: var(--pure-popup-footer-button-cancel-color);
				--pure-button-font-size: var(--pure-popup-footer-button-cancel-font-size);
				--pure-button-font-weight: var(--pure-popup-footer-button-cancel-font-weight);
				--pure-button-background: var(--pure-popup-footer-button-cancel-background);
			}

			&--confirm {
				--pure-button-color: var(--pure-popup-footer-button-confirm-color);
				--pure-button-font-size: var(--pure-popup-footer-button-confirm-font-size);
				--pure-button-font-weight: var(--pure-popup-footer-button-confirm-font-weight);
				--pure-button-background: var(--pure-popup-footer-button-confirm-background);
			}
		}
	}

	&--not-footer {
		.pure-popup__content {
			padding: var(--pure-popup-content-padding, 0 20px 20px);
		}
	}

	&--header-line {
		.pure-popup__header {
			border-bottom-width: var(--pure-popup-header-bottom-width, 1px);
		}

		.pure-popup__footer {
			border-top-width: var(--pure-popup-footer-top-width, 1px);
		}
	}

	&--direction {
		&--center {
			.pure-popup__container {
				width: var(--pure-popup-width, 80%);
				height: var(--pure-popup-height);
				max-width: var(--pure-popup-max-width, 100%);
				max-height: var(--pure-popup-max-height, 100%);
			}
		}

		&--top {
			.pure-popup__container {
				margin-bottom: auto;
				width: var(--pure-popup-width, 100%);
				height: var(--pure-popup-height);
				max-width: var(--pure-popup-max-width, 100%);
				max-height: var(--pure-popup-max-height, 100%);
			}

			.pure-popup__wrapper {
				border-radius: var(
					--pure-popup-border-radius,
					0 0 var(--pure-radius-default) var(--pure-radius-default)
				);
			}
		}

		&--bottom {
			.pure-popup__container {
				margin-top: auto;
				width: var(--pure-popup-width, 100%);
				height: var(--pure-popup-height);
				max-width: var(--pure-popup-max-width, 100%);
				max-height: var(--pure-popup-max-height, 100%);
			}

			.pure-popup__wrapper {
				border-radius: var(
					--pure-popup-border-radius,
					var(--pure-radius-default) var(--pure-radius-default) 0 0
				);
			}
		}

		&--left {
			.pure-popup__container {
				margin-right: auto;
				width: var(--pure-popup-width, 80%);
				height: var(--pure-popup-height, 100%);
				max-width: var(--pure-popup-max-width, 100%);
				max-height: var(--pure-popup-max-height, 100%);
			}

			.pure-popup__wrapper {
				border-radius: var(
					--pure-popup-border-radius,
					0 var(--pure-radius-default) var(--pure-radius-default) 0
				);
			}
		}

		&--right {
			.pure-popup__container {
				margin-left: auto;
				width: var(--pure-popup-width, 80%);
				height: var(--pure-popup-height, 100%);
				max-width: var(--pure-popup-max-width, 100%);
				max-height: var(--pure-popup-max-height, 100%);
			}

			.pure-popup__wrapper {
				border-radius: var(
					--pure-popup-border-radius,
					var(--pure-radius-default) 0 0 var(--pure-radius-default)
				);
			}
		}
	}

	&--enter {
		animation-name: animationPureScaleIn;

		&.pure-popup--direction {
			&--center {
				.pure-popup__container {
					animation-name: animationPureScaleIn;
				}
			}

			&--top {
				.pure-popup__container {
					animation-name: animationPureTopIn;
				}
			}

			&--bottom {
				.pure-popup__container {
					animation-name: animationPureBottomIn;
				}
			}

			&--left {
				.pure-popup__container {
					animation-name: animationPureLeftIn;
				}
			}

			&--right {
				.pure-popup__container {
					animation-name: animationPureRightIn;
				}
			}
		}
	}

	&--leave {
		animation-name: animationPureScaleLeave;

		&.pure-popup--direction {
			&--center {
				.pure-popup__container {
					animation-name: animationPureScaleLeave;
				}
			}

			&--top {
				.pure-popup__container {
					animation-name: animationPureTopLeave;
				}
			}

			&--bottom {
				.pure-popup__container {
					animation-name: animationPureBottomLeave;
				}
			}

			&--left {
				.pure-popup__container {
					animation-name: animationPureLeftLeave;
				}
			}

			&--right {
				.pure-popup__container {
					animation-name: animationPureRightLeave;
				}
			}
		}
	}
}
